<template>
	<view class="spread flex" :class="{'box-spread': showFlag}">
		<view class="spread-item flex flex-col items-center" v-for="item in PositionDictionary" :key="item.label"
			:style="item.style">
			<text class="spread-up">{{item.up}}</text>
			<template v-if="isAch == 1">
				<image :src="item.front" mode="widthFix" v-if="item.dir == 0"></image>
				<image :src="item.back" mode="widthFix" v-else></image>
			</template>
			<template v-else>
				<image src="@/static/tarot-bg.png" mode="widthFix"></image>
				<text class="spread-name">{{item.name}}</text>
			</template>
			<text class="spread-label flex justify-center">{{item.label}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	import html2canvas from 'html2canvas';

	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const spreadRef = ref(null)
	const PositionDictionary = ref([{
			up: " 2 ",
			name: "灵",
			label: "现在",
			style: {
				width: '100%'
			}
		},
		{
			up: " 1 ",
			name: "身",
			label: "过去",
			style: {
				width: '50%'
			}
		},
		{
			up: " 3 ",
			name: "心",
			label: "未来",
			style: {
				width: '50%'
			}
		},
	])
	onMounted(() => {
		console.log(cardList.value, isAch.value)
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				dataFormat()
			}
		})
	})
	const generateImage = () => {
		console.log(spreadRef.value)
		html2canvas(spreadRef.value, {
			scale: 1,
			useCORS: true
		}).then(canvas => {
			const img = canvas.toDataURL('image/png');
			console.log(img)
		});
	}
	const dataFormat = () => {
		PositionDictionary.value.map((item, idx) => {
			cardList.value.map((card, index) => {
				if (item.up == (index + 1)) {
					item.dir = cardList.value[idx].dir
					item.front = cardList.value[idx].tarot.front
					item.back = cardList.value[idx].tarot.back
				}
			})
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		height: auto;
		padding: 30rpx 0;
		flex-wrap: wrap;
	}

	.spread-item {
		position: relative;
		box-sizing: border-box;
	}

	.spread-label {
		align-self: center;
		width: 80rpx;
		font-size: 28rpx;
	}
</style>